<!--围栏地图页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
  <span style="line-height:60px;font-size:20px;">围栏绘制</span>
  <el-button type="primary" style="float:right;margin-top:13px;"
             @click="router.push('/geofenceMap')">返回</el-button>
  </div>
<!--准备一个div充当地图容器，显示地图-->
  <div id="mapContainer" style="width: 100%; height: 84vh;"></div>
<!--新建围栏弹窗-->
<el-dialog title="新建围栏" v-model="dialogVisible" :before-close="closeDialog">
  <el-form>
    <el-form-item label="围栏名称">
      <el-input v-model="geofence.name" placeholder="请输入围栏名称"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="closeDialog">取消</el-button>
    <el-button type="primary" @click="saveGeofence" >确定</el-button>
  </template>
</el-dialog>
</template>
<script setup>
import router from "@/router";
import { nextTick,onMounted,ref} from "vue";
import { DrawScene, DrawControl,OperateEventType } from 'bmap-draw';
//8.保存新增围栏时给后端发送的数据
const geofence=ref({
  name:'',//围栏名称
  points:{}//围栏位置数据，也是对象
});
let map ;
//进入页面就加载地图
onMounted(() => {
  nextTick(()=>{
    //创建实例
     map=new BMapGL.Map("mapContainer");
    //中心点坐标
    let point=new BMapGL.Point(116.404,39.915);
   //地图初始化，设置地图展示级别
    map.centerAndZoom(point,15);
  })
})
// 添加鼠标绘制控件
// 创建绘制场景，基于上面的地图对象生成绘制场景对象
const scene = new DrawScene(map);
// 创建绘制控件，绘制场景对象和配置类对象作为构造参数传入
const drawContrl = new DrawControl(scene, {
  enableTips: false,//提示信息
  anchor: BMAP_ANCHOR_TOP_RIGHT,//控件的位置
  drawingItems: [//设置可绘制的图形
    'circle',
    'rectangle'
  ]
});
//在当前绘制场景下添加完成时间的监听
//获取触发完成事件的电子围栏目标对象，注意需要导入OperateEventType
scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
//event是事件的返回值，DOM中所有事件对象都基于Event对象
  //event.target用于获取当前触发完成事件的围栏元素
  console.log(event.target);
/**/
let overlay=event.target.overlay;
console.log(overlay);
//
if(overlay instanceof BMapGL.Circle){
  geofence.value.position.type = 'circle';
  geofence.value.position.radius=overlay.getRadius();
  }else {
  geofence.value.position.type = 'rectangle';
  let recPoints =[];
  for(let i=0;i<4;i++){
    recPoints.push(overlay.points[i].latLng.lng+"-"+overlay.points[i].latLng.lat);
  }
  geofence.value.position.recPoints=recPoints.join(',');
  console.log(geofence.value)
  //绘制控件添加到地图
  map.addControl(drawContrl);
}
})

//保存围栏的方法
const saveGeofence=()=>{
  if(!geofence.value.name || geofence.value.name.trim()== ''){
    ElMessage.error('请输入围栏名称');
    return;
  }
  /*console.log(geofence.value)
  * 因为geofence中的position也是对象，把position转为JSON
  * 后再将geofence转为查询字符串*/
  gefence.value.position =JSON.stringify(geofence.value.position)
  let data =qs.stringify(geofence.value);
  axios.post(BASE_URL+'/v1/geofence/save',data).then(response=>{
      if (response.data.code==2000){
        ElMessage.success('新增成功');
        dialogVisible.value=false;
        router.push('/geofence');
      }else {
        ElMessage.error(response.data.message);
      }
  })
}

//定义处理弹窗关闭的方法
const closeDialog=()=>{
  if (confirm('您确认要关闭弹窗吗？')){
    map.clearOverlays();
    geofence.value={
      name:'',
      position:{}
    };
    dialogVisible.value=false;
  }
}
</script>
<style scoped>

</style>